<template>
	<view>
		<custom-header title="评级选项" />
		<scroll-view
			:scroll-y="true" 
			scroll-with-animation
			:style="{height:'calc(100vh - 128rpx - '+statusBarHeight+'px)'}" 
			class="scroll_content_wrap">
				<view class="_wrap">
					<view class="option_wrap">
						<view class="name">
							枝长<text>*</text>
						</view>
						<view class="value">
							<view class="v_list_wrap">
								<view 
									class="list" 
									:class="{'active':branchLength == item.id}"
									v-for="(item,index) in branchLengthList" 
									:key="index"
									@click="handleSelectBranch(item)">
										{{ item.name }}
								</view>
							</view>
						</view>
					</view>
					<view class="option_wrap">
						<view class="name">
							枝粗<text>*</text>
						</view>
						<view class="value">
							<view class="v_list_wrap">
								<view 
									class="list" 
									:class="{'active':branchThick == item.id}"
									v-for="(item,index) in branchThickList" 
									:key="index"
									@click="handleSelectBranchThick(item)">
										{{ item.name }}
								</view>
							</view>
						</view>
					</view>
					<view class="option_wrap">
						<view class="name">
							均匀度<text>*</text>
						</view>
						<view class="value">
							<view class="v_list_wrap">
								<view 
									class="list" 
									:class="{'active':uniformity == item.id}"
									v-for="(item,index) in uniformityList" 
									:key="index"
									@click="handleSelectUniformity(item)">
										{{ item.name }}
								</view>
							</view>
						</view>
					</view>
					<view class="option_wrap">
						<view class="name">
							花头<text>*</text>
						</view>
						<view class="value">
							<view class="v_list_wrap">
								<view 
									class="list" 
									:class="{'active':flowerHead == item.id}"
									v-for="(item,index) in flowerHeadList" 
									:key="index"
									@click="handleSelectFlowerHead(item)">
										{{ item.name }}
								</view>
							</view>
						</view>
					</view>
					<view class="option_wrap">
						<view class="name">
							优点（可多选）<text>*</text>
						</view>
						<view class="value">
							<view class="v_list_wrap">
								<view 
									class="list" 
									:class="{'active':meritArr.indexOf(item.id) >-1 }"
									v-for="(item,index) in meritList" 
									:key="index"
									@click="handleSelectMerit(item)">
										{{ item.name }}
								</view>
							</view>
						</view>
					</view>
					<view class="option_wrap">
						<view class="name">
							瑕疵（可多选）<text>*</text>
						</view>
						<view class="value">
							<view class="v_list_wrap">
								<view 
									class="list" 
									:class="{'active':flawArr.indexOf(item.id) >-1 }"
									v-for="(item,index) in flawList" 
									:key="index"
									@click="handleSelectFlaw(item)">
										{{ item.name }}
								</view>
							</view>
						</view>
					</view>
					<view class="option_wrap">
						<view class="name">
							成熟度<text>*</text>
						</view>
						<view class="value">
							<view class="v_list_wrap">
								<view 
									class="list" 
									:class="{'active':maturity == item.id}"
									v-for="(item,index) in maturityList" 
									:key="index"
									@click="handleSelectMaturity(item)">
										{{ item.name }}
								</view>
							</view>
						</view>
					</view>
				</view>
		</scroll-view>
		<view class="footer_btn_wrap">
			<view class="btn_wrap">
				<button
					size="default" 
					type="default" 
					class="btn confirm" 
					hover-class="confirm_hover" 
					:hover-stay-time="200" 
					@click="handleConfirm"
					:disabled="btnLoading"
					:loading="btnLoading">确认选择</button>
			</view>
		</view>
		
		<!-- 自定义消息弹出层 -->
		<custom-popup
			:show="isShowToast" 
			:config="popupConfig"
			@confirm="isShowToast = false">
		</custom-popup>
	</view>
</template>

<script setup>
	import { computed, ref } from 'vue'
	import { onLoad } from "@dcloudio/uni-app";
	import { useStore } from 'vuex';
	const store = useStore()
	import { navigateBack } from '../../utils/util.js'
	
	const statusBarHeight = computed(()=>{
		return store.getters.statusBarHeight
	})
	const isShowToast = ref(false)
	const popupConfig = ref({})
	
	// 枝长
	const branchLengthList = ref([
		{ id:1,name:'40-45cm' },
		{ id:2,name:'45-50cm' },
		{ id:3,name:'50-55cm' },
		{ id:4,name:'55-60cm' },
		{ id:5,name:'60-65cm' },
		{ id:6,name:'65-70cm' },
		{ id:7,name:'70-75cm' },
		{ id:8,name:'75-80cm' },
		{ id:9,name:'80-85cm' },
		{ id:10,name:'85-90cm' }
	])
	const branchLength = ref(null)
	const handleSelectBranch = (item)=>{
		branchLength.value = item.id
	}
	// 枝粗
	const branchThickList = ref([
		{ id:1,name:'粗壮' },
		{ id:2,name:'中等粗细' },
		{ id:3,name:'偏细' }
	])
	const branchThick = ref(null)
	const handleSelectBranchThick = (item)=>{
		branchThick.value = item.id
	}
	// 均匀度
	const uniformityList = ref([
		{ id:1,name:'支支均匀' },
		{ id:2,name:'1-2支不均匀' },
		{ id:3,name:'3-4支不均匀' }
	])
	const uniformity = ref(null)
	const handleSelectUniformity= (item)=>{
		uniformity.value = item.id
	}
	// 花头
	const flowerHeadList = ref([
		{ id:1,name:'花苞非常大' },
		{ id:2,name:'花苞大' },
		{ id:3,name:'花苞中等' },
		{ id:4,name:"花苞偏小" }
	])
	const flowerHead = ref(null)
	const handleSelectFlowerHead= (item)=>{
		flowerHead.value = item.id
	}
	// 优点
	const meritList = ref([
		{ id:1,name:'当天采摘' },
		{ id:2,name:'叶水清爽' },
		{ id:3,name:'花型端正' },
		{ id:4,name:"花头特好" },
		{ id:5,name:"无病虫害" },
		{ id:6,name:"花期长" },
		{ id:7,name:"特别新鲜" },
		{ id:8,name:"防灰霉处理" }
	])
	const meritArr = ref([])
	const handleSelectMerit= (item)=>{
		const index = meritArr.value.indexOf(item.id)
		if(index > -1){
			meritArr.value.splice(index,1)
		}else{
			meritArr.value.push(item.id)
		}
	}
	// 瑕疵
	const flawList = ref([
		{ id:1,name:'花型欠佳' },
		{ id:2,name:'轻微病虫害' },
		{ id:3,name:'轻微斑点' },
		{ id:4,name:"叶片烧尖" },
		{ id:5,name:"花心炸苞" },
		{ id:6,name:"叶水欠佳" },
		{ id:7,name:"枝干略细" }
	])
	const flawArr = ref([])
	const handleSelectFlaw = (item)=>{
		const index = flawArr.value.indexOf(item.id)
		if(index > -1){
			flawArr.value.splice(index,1)
		}else{
			flawArr.value.push(item.id)
		}
	}
	// 成熟度
	const maturityList = ref([
		{ id:1,name:'偏上(开放度1)' },
		{ id:2,name:'适中熟(开放度2-3)' },
		{ id:3,name:'偏熟(开放度3-4)' }
	])
	const maturity = ref(null)
	const handleSelectMaturity = (item)=>{
		maturity.value = item.id
	}
	
	
	// 确认
	const btnLoading = ref(false)
	const judgeRequired = ()=>{
		let message = ''
		if(!branchLength.value){
			message = '请选择枝长'
		}else if(!branchThick.value){
			message = '请选择枝粗'
		}else if(!uniformity.value){
			message = '请选择均匀度'
		}else if(!flowerHead.value){
			message = '请选择花头'
		}else if(!meritArr.value.length){
			message = '请选择优点'
		}else if(!flawArr.value.length){
			message = '请选择瑕疵'
		}else if(!maturity.value){
			message = '请选择成熟度'
		}
		
		if(message){
			isShowToast.value = true
			popupConfig.value.message = message
			throw new Error(message)
		}
	}
	const handleConfirm = async()=>{
		try {
			await judgeRequired()
			navigateBack()
		} catch (error) {
			//TODO handle the exception
			console.log(error)
		}
		
		
	}
	
	onLoad(( option )=>{
		console.log(option)
		// console.log(JSON.parse(option.rate))
	})
</script>

<style lang="scss">
	._wrap{
		padding: 20rpx;
	}
	.option_wrap{
		border-radius: 10rpx;
		background: #FFFFFF;
		padding: 30rpx 20rpx 20rpx;
		margin-bottom: 20rpx;
		.name{
			font-size: 28rpx;
			color: #333333;
			font-weight: bold;
			text{
				color: #F70707;
			}
		}
		.value{
			.v_list_wrap{
				display: flex;
				flex-wrap: wrap;
				.list{
					min-width: 180rpx;
					padding: 0 15rpx;
					height: 60rpx;
					text-align: center;
					line-height: 60rpx;
					border-radius: 50rpx;
					background: #F5F6FA;
					font-size: 28rpx;
					color: #666666;
					margin-left: 30rpx;
					margin-top: 25rpx;
					border: 1rpx solid #F5F6FA;
					box-sizing: border-box;
					&.active{
						background: #FCEEF0;
						border: 1rpx solid #FF3316;
						color: #FF3316;
					}
				}
			}
		}
	}
</style>
